<template>
    <div>
        <!--
            inline:表示是行内元素，代表一行可以放置多个表单元素
            :model属性，这个属性的作用是，把表单的数据收集到哪个对象身上,此处是收集到 cForm 身上
        -->
        <el-form :inline="true" class="demo-form-inline" :model="cForm">
            <el-form-item label="一级分类">
                <!-- v-model="cForm.category1Id" 展示选中的选项 -->
                <el-select placeholder="请选择" v-model="cForm.category1Id" @change="getCategory2List" :disabled="show">
                    <!-- :value 收集用户选中的选项的id，收集之后，需要用这个id向服务器发请求获取二级分类的数据  -->
                    <el-option :label="list1.name" :value="list1.id" v-for="(list1,index) in Category1List" :key="list1.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="二级分类">
                <el-select placeholder="请选择" v-model="cForm.category2Id" @change="getCategory3List" :disabled="show">
                    <el-option :label="list2.name" :value="list2.id" v-for="(list2,index) in Category2List" :key="list2.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="三级分类">
                <el-select placeholder="请选择" v-model="cForm.category3Id" @change="getCategoryListInfo" :disabled="show">
                    <el-option :label="list3.name" :value="list3.id" v-for="(list3,index) in Category3List" :key="list3.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "CategorySelect",
    data(){
        return {
            // 一级分类的数据
            Category1List:[],
            // 二级分类的数据
            Category2List:[],
            // 三级分类的数据
            Category3List:[],
            // 收集相应的一级二级三级分类的id
            cForm:{
                category1Id:'',
                category2Id:'',
                category3Id:''
            },
        }
    },
    props:[
        // 接收父组件传过来的值，控制按钮是否可点击，当用户点击了添加属性，三级分类下拉框是不可点击状态
        'show'
    ],
    // 当组件挂载完毕，向服务器发请求，获取相应的一级分类的数据
    mounted() {
        this.getCategory1List()
    },
    methods:{
        // 向服务器发请求，获取相应的 一级分类 的数据
        async "getCategory1List"() {
            let g1Result = await this.$API.attr.reqCategory1List()
            console.log(g1Result)
            if (g1Result.code==200) {
                this.Category1List = g1Result.data
            } else {
                alert('获取一级分类数据失败！')
            }
        },
        // 只要一级分类下拉框发生变化，就向服务器发请求 ， 获取相应的 二级分类 的数据，  携带 一级分类 中选中的商品id
        async "getCategory2List"() {
            // 一级分类发生变化时，需要清空 二级分类 和 三级分类 中的内容
            this.Category2List = []
            this.Category3List = []
            this.cForm.category2Id = ''
            this.cForm.category3Id = ''
            // 解构
            const {category1Id} = this.cForm
            // 把 一级分类 的商品id通过自定义事件传给父组件,传过去两个数据，level用于区分当前这个id是几级分类的id
            this.$emit('getCategoryId',{"categoryId":category1Id, "level":1})
            let g2Result = await this.$API.attr.reqCategory2List(this.cForm.category1Id)
            // console.log(g2Result)
            if (g2Result.code == 200) {
                this.Category2List = g2Result.data
            } else {
                alert('获取二级分类数据失败！')
            }
        },
        // 只要二级分类 下拉框中的内容发生变化，就向服务器发请求，获取相应的 三级分类 的数据，     携带二级分类中选中的商品id
        async "getCategory3List"() {
            // 二级分类发生变化时，需要清空 三级分类 中的内容
            this.Category3List = []
            this.cForm.category3Id = ''
            // 解构
            const {category2Id} = this.cForm
            // 把 二级分类 的商品id通过自定义事件传给父组件,传过去两个数据，level用于区分当前这个id是几级分类的id
            this.$emit('getCategoryId',{"categoryId":category2Id, "level":2})
            let g3Result = await this.$API.attr.reqCategory3List(this.cForm.category2Id)
            // console.log(g3Result)
            if (g3Result.code == 200) {
                this.Category3List = g3Result.data      // 把返回的数据存到组件实例身上
            } else {
                alert('获取三级分类数据失败！')
            }
        },
        // 三级分类的事件回调，只要一触发就向服务器发请求获取产品列表
        "getCategoryListInfo"() {
            // 解构
            const {category3Id} = this.cForm
            // 把 三级分类 的商品id通过自定义事件传给父组件,传过去两个数据，level用于区分当前这个id是几级分类的id
            this.$emit('getCategoryId',{"categoryId":category3Id, "level":3})
        }
    }
}
</script>

<style scoped>

</style>
